<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>过渡效果</title>

        <style type="text/css">

            body { background: #ff0 ; text-align: center ; }

            .wrapper { width: 200px ; height: 200px ; background: #dedede ; margin: 25px auto ; border: 1px solid blue ; }

            .first { 
                /* 设置用来进行过渡的 CSS 属性 */
                transition-property: width ; /* 明确过渡效果针对哪个属性 */
                /* 设置过渡进行的时间长度 */
                transition-duration: 1s ; /* 规定完成过渡效果需要花费的时间（以秒或毫秒计） */
            }
            .first:hover {  width: 800px ;  }

            .second { 
                transition-property: width,height ;
                transition-duration: 1s ;
            }

            .second:hover {  width: 300px ;  height: 300px ; }

            .third {  transition-property: all ; transition-duration: 1s ; }
            .third:hover {  width: 300px ;  height: 300px ; background: purple ; border-width: 5px ; }

            /*
            .fourth {  transition-property: all ; transition-duration: 1s ; display: none ; }
            [type=button]:hover+div {  width: 300px ;  height: 300px ; display: block ; }
            */

            /*
            .fourth {  transition-property: all ; transition-duration: 1s ; visibility: hidden ; }
            [type=button]:hover+div { visibility: visible ; }
            */

            .fourth {  transition-property: all ; transition-duration: 1s ; opacity: 0% ; }
            [type=button]:hover+div { opacity: 100% ; }
            .fourth:hover { opacity: 100% ; }

        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <button type="button">鼠标悬浮到这里来试试</button>
        <div class="wrapper fourth"></div>

        <hr>
        
    </body>
</html>